<template lang="pug">
.chat-detail
  header.chat-header {{ name }}
    p.chat-back.iconfont.icon-fanhui-(@click="$router.back()") 
  ul.friendlist
    li(v-for="d in list", :key="d.id", :class="d.info ? 'right' : 'left'")
      img(:src=" !d.info ? cover: cover1 ")
      span {{ d.content }}
  footer.chat-footer
    p.iconfont.icon-yuyin
    input.footer-input(@keyup.enter="addop", v-model="content")
    p.iconfont.icon-Ovalx
    p.iconfont.icon-jiahao
</template>

<script>
import $ from "jquery"; //在需要使用的页面中
export default {
  data() {
    return {
      id: null,
      content: "",
      list: [],
      cover: "",
      cover1: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-6c2d35a8c6de56f8c7ee3a45a56ded85_hd.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634994774&t=1bbee7e0b7a1685340762937b8b4ff22",
      name: ''
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.cover = this.$route.query.img;
    this.name = this.$route.query.name;
    
    console.log(this.cover);
    this.getList();
  },
  methods: {
    addop() {
      if (!this.content) return;
      let obj = {
        fid: this.id,
        content: this.content,
        type: "p",
        info: 1,
      };
      this.$http
        .get("/add-my-all-list", {
          params: {
            ...obj,
          },
        })
        .then((val) => {
          if (val.status == 200) {
            console.log("成功");
            this.list.push({ ...obj, id: Math.random() * 10 });
            $.ajax({
              url: "http://www.tuling123.com/openapi/api",
              type: "post",
              data: {
                key: "f30e3b04537946dbade6ff935a73c6c1",
                info: this.content,
              },
              success: (data) => {
                let cobj = {
                  fid: this.id,
                  content: data.text,
                  type: "p",
                  info: 0,
                };
                this.$http.get("/add-my-all-list", {
                  params: {
                    ...cobj,
                  },
                }).then((res)=>{
                  console.log(res)
                  if(res.status==200){
                    this.list.push({ ...cobj, id: Math.random() * 10 });
                    this.content = ""
                  }
                });
              },
            });
          }
        });
    },
    getList() {
      const { id } = this;
      this.$http
        .get("/select-list-all-fid", {
          params: {
            fid: id,
          },
        })
        .then(({ data }) => {
          this.list = data;
          console.log(this.list);
        });
    },
  },
};
</script>

<style lang="sass">
.chat-detail
  width: 100%
  .chat-header
    width: 100%
    height: 0.44rem
    border-bottom: 3px solid #f1f1f1
    text-align: center
    line-height: .44rem
    font-weight: 550
    background: #fff
    color: #000
    position: fixed
    top: 0
    left: 0
    z-index: 2
  .chat-back
    position: fixed
    top: 0
    left: 10px
    font-size: .24rem
  .chat-footer
    width: 100%
    height: 0.5rem
    border-top: 3px solid #f1f1f1
    background: #f5f5f5
    position: fixed
    bottom: 0
    left: 0
    z-index: 2
    display: flex
    align-items: center
    .iconfont
      width: 0.28rem
      height: 0.28rem
      font-size: .22rem
      margin: .1rem
      color: #595959
    .footer-input
      width: 2.4rem
      height: 0.32rem
      border-radius: 4px
  .friendlist
    width: 100%
    // height: 5.7rem
    height: 86vh
    display: flex
    flex-direction: column
    background: url(~@/assets/img/chat-bg1.jpg) no-repeat center
    background-size: 100%
    position: fixed
    top: 44px
    overflow: scroll
    li
      display: flex
      align-items: center
      margin: .1rem 0
      span
        padding: .1rem
        border-bottom-left-radius: 10px
        border-bottom-right-radius: 10px
    .right
      flex-direction: row-reverse
      margin: .06rem 0
      span
        background: rgba(233,84,84,.5)
        border-top-left-radius: 10px
    .left
      span
        background: rgba(255,255,255,.7)
        border-top-right-radius: 10px
  .box
    display: flex
  img
    width: .4rem
    height: .4rem
    border-radius: 50%
    margin: 0 .1rem
</style>